{layout name="common/basic" /}


<div style="width:100%;overflow: hidden;  " id="tovideiframe">

    <iframe id="videiframe" style="width:100%; margin-top: -45px; object-fit: fill"
            src="//player.bilibili.com/player.html?aid=32556750&cid=57080268&page={$list.sort}&as_wide=1&high_quality=1&danmaku=0"
            scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

</div>

<!--重要，设置iframe的高度-->
<script type="text/javascript">
    document.getElementById("videiframe").style.height = document.getElementById("videiframe").scrollWidth * 0.7 + "px";
    document.getElementById("tovideiframe").style.height = document.getElementById("tovideiframe").scrollWidth * 0.71 - 85 + "px";
</script>

<!--以上是提示购买的结束-->
<div class="page-header" >
    <h3>{$list.title} <small>{$list.page_view} 次</small></h3>
    <div class="btn-toolbar" role="toolbar">

    </div>
</div>

<div class="row">
    {if condition="$up neq ''"}
    <div class="col-xs-12 col-sm-6 col-md-4">
        <a class="btn btn-default btn-block"
           style="margin-bottom: 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"
           href="{:url('index/index/view',['id'=>$up.id])} " role="button">上一课：{$up.title}</a>
    </div>
    {else}
    <div class="col-xs-12 col-sm-6 col-md-4">
        <a class="btn btn-default btn-block"
           style="margin-bottom: 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"
           href="#" role="button">这是第一课</a>
    </div>
    {/if}
    <div class="col-xs-12 col-sm-6 col-md-4"></div>
    {if condition="$next neq ''"}
    <div class="col-xs-12 col-sm-6 col-md-4">
        <a class="btn btn-default btn-block"
           style="margin-bottom: 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"
           href="{:url('index/index/view',['id'=>$next.id])} " role="button">下一课：{$next.title}</a>
    </div>
    {else}
    <div class="col-xs-12 col-sm-6 col-md-4"><a class="btn btn-default btn-block"
                                                style="margin-bottom: 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;"
                                                href="#" role="button">这是最后一课</a>
    </div>
    {/if}
</div>



<span id="chat"></span>
<div class="form-group input-group field-feed-content required">
     <textarea id="titleChat" name="titleChat" class="form-control"
               placeholder="{$Request.param.data_id?'写回复内容':'写评论'}..."
               aria-required="true"></textarea>
    <span class="input-group-btn">
        <button id="comment" class="btn btn-success"
                style="height: 54px;width: 54px;">发布</button></span>
</div>

<script>
    $(document).ready(function () {

        $("#comment").click(function () {
            var title = $("textarea#titleChat").val();
            if (!title) {
                return;
            }
            $("#chat").load("{:url('bbs/add')}", {
                title: title,
                shop: {$list.id},
            });
            $("textarea#titleChat").val("");
        });
    });
</script>


<div class="panel panel-default">
    <div class="panel-heading">评论</div>


    <div class="panel-body">

        <table class="table" style="word-break:break-all; word-wrap:break-all;">


            <tbody>


            {volist name='bbs' id='user'}
            <tr>
                <td class="type-info" style="border-top: 0px;border-bottom: 1px solid #ddd;">

                    <!-- 点赞头部的排版 -->
                    <div class="row" style="margin-bottom: 10px">
                        <div class="col-xs-2 col-md-1 ">
                            <a href="#">
                                <img class="media-object img-circle"
                                     src="__STATIC__/images/user/user ({:rand(1,25)}).jpg" data-holder-rendered="true"
                                     style="width: 34px; height: 34px;">
                            </a>
                        </div>
                        <div class="col-xs-6 col-md-9  ">
                            <h6><small>{$user.user.nickname}</small></h6>
                        </div>
                        <div class="col-xs-3  col-md-1 pull-right">
                            <!-- 点赞的功能 -->
                            <span onclick='public_ajax("{$Think.server.script_name}/index/index/view/all/1/data_id/{$user.id}",0)'
                                  style="position: relative;">


                                    <span id="like_icon_all_{$user.id}"
                                          style="color: {$user.on?'#0084ff':'#8590a6'}; fill: currentColor;">
                            <svg viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg" class="likeicon" width="13"
                                 height="16" aria-hidden="true" style="height: 16px; width: 13px;"><title></title><g><path
                                    d="M.718 7.024c-.718 0-.718.63-.718.63l.996 9.693c0 .703.718.65.718.65h1.45c.916 0 .847-.65.847-.65V7.793c-.09-.88-.853-.79-.846-.79l-2.446.02zm11.727-.05S13.2 5.396 13.6 2.89C13.765.03 11.55-.6 10.565.53c-1.014 1.232 0 2.056-4.45 5.83C5.336 6.965 5 8.01 5 8.997v6.998c-.016 1.104.49 2 1.99 2h7.586c2.097 0 2.86-1.416 2.86-1.416s2.178-5.402 2.346-5.91c1.047-3.516-1.95-3.704-1.95-3.704l-5.387.007z"></path></g></svg>
                        </span> 

                        </span>
                            <!-- {$user.likes?$user.likes:"赞"} --><span id="like_a_all_{$user.id}"
                                                                        style="position:absolute;left:0px;top:0px;z-index:-20;color: red ;animation:mylike 2s;display:none "></span>
                        </div>
                    </div>



                    {:nl2br($user.title)}
                    <h5><small> {$user.create_time}


                        <a href="javascript:void(0);"
                           onclick="document.getElementById('reply_all_{$user.id}').style.display = '' ">回复</a>

                    </small></h5>


                    <div id="reply_all_{$user.id}" class="form-group input-group field-feed-content required"
                         style="display: none">

                        <textarea id="titleChat_all_{$user.id}" name="title" class="form-control" placeholder="写回复"
                                  aria-required="true"></textarea>
                        <span class="input-group-btn"><button type="submit" class="btn btn-success"
                                                              onclick="bbs(document.getElementById('titleChat_all_{$user.id}').value,{$list.id},{$user.id})"
                                                              style="height: 54px;width: 54px;">回复</button></span>


                    </div>


                </td>
            </tr>

            {/volist}
            </tbody>
        </table>

    </div>

</div>


<div class="panel panel-default">
    <div class="panel-heading">扫码观看当前课程</div>
    <div class="panel-body text-center">
        <div id="qrcode"></div>
        <script>

            //生成前景色为红色背景色为白色的二维码
            jQuery('#qrcode').qrcode({
                render: "canvas", //也可以替换为table
                foreground: "#337ab7",
                background: "#fff",
                width: 200,
                height: 200,
                text: "http://open.gaoxueya.com/index/index/view/id/{$list.id}"
            });
        </script>
    </div>
</div>


<!-- Modal 作业-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">本节学习完成</h4>
            </div>
            <div class="modal-body"><p class="text-center">
                <span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size: 60px;color: #f0ad4e;"
                      title="本课学习完成一次获得"></span>
                <span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size: 60px;color: #f0ad4e;"
                      title="评论一次本节课程即可获取"></span>
                <span class="glyphicon glyphicon-star" aria-hidden="true" style="font-size: 60px;color: #f0ad4e;"
                      title="评论2次本节课程即可获取"></span></p>
                <h3 class="text-center">本节的知识点有哪些：</h3>
                <form action="" method="post">
                    <div class="form-group">
                        <textarea class="form-control" rows="3" id="titlemodel" name="title" value=""
                                  placeholder="填写问题答案"></textarea>

                    </div>
                    <h6>本节课有疑问的地方可以直接提交问题</h6>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" onclick="bbs(document.getElementById('titlemodel').value,{$list.id})"
                        class="btn btn-primary" data-dismiss="modal">提交作业
                </button>
            </div>
        </div>
    </div>
</div>


<script>

    var myVideo = document.getElementById("myVideo");

    // 调用模态框
    function show_modal() {
        $('#myModal').modal('show');
    }


</script>


<script>

    // 评论功能的ajax函数
    function bbs(t, id, data_id) {
        t = t.trim();


        var xmlhttp;

        if (t.length == 0) {
            document.getElementById("titleChat").innerHTML = "";
            document.getElementById("feed-content").innerHTML = "";
            return;

        }


        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {


                // document.getElementById("bbs").innerHTML=xmlhttp.responseText+document.getElementById("bbs").innerHTML;
                document.getElementById("bbs").innerHTML = document.getElementById("bbs").innerHTML + xmlhttp.responseText;
                // document.getElementById("chat").innerHTML=document.getElementById("chat").innerHTML+xmlhttp.responseText;
                // document.getElementById("bbs_index").innerHTML=xmlhttp.responseText+document.getElementById("bbs_index").innerHTML;
                document.getElementById("bbs_index").innerHTML = document.getElementById("bbs_index").innerHTML + xmlhttp.responseText;
                // document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
                // document.getElementById('bbs_index').scrollTop = document.getElementById('bbs_index').scrollHeight;
                // document.getElementById('bss_content').scrollTop = document.getElementById('bss_content').scrollHeight;

                // 如果是回复评论，回复后取消url的传值，刷新页面
                if (data_id >= 1) {
                    window.location.href = "{$Think.server.script_name}/index/index/view/id/" + id
                }


            }
        }
        xmlhttp.open("POST", "{$Think.server.script_name}/index/bbs/add/", true);
        // xmlhttp.open("GET","/index/bbs/add/title/"+t+"/shop/"+id,true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // xmlhttp.send("t=Bill&lname=Gates");

        xmlhttp.send("title=" + t + "&shop=" + id + "&age=" + data_id);
        // xmlhttp.send();


        // 发送完成后清空内容
        document.getElementById('titleChat').value = "";
        document.getElementById('title_homework').innerText = "";
        // document.getElementById("sendChat").value='';
        // 发送完成后禁止再次点击发送按钮
        // document.getElementById("sendChat").disabled= true;
        // document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;

        // $('#chat').scrollTop( $('#chat')[0].scrollHeight );
        // var content = document.getElementById('chat');
        // content.scrollTop = content.scrollHeight;

    }


</script>


